<template>
  <div class="login-box">
    <div class="input-box">
      <img src="../assets/login-input-bg.png" alt="" />
      <div class="input-box-form">
        <div class="input-box-form-title">设施农用地办理一件事</div>
        <div class="input-box-form-item">
          <span class="input-box-form-item-title">手机号</span>
          <input
            v-model="form.telephone"
            type="text"
            placeholder="请输入手机号"
          />
        </div>
        <div class="input-box-form-item">
          <span class="input-box-form-item-title">验证码</span>
          <input
            v-model="form.authCode"
            type="text"
            placeholder="请输入验证码"
            @keyup.enter="login"
          />
          <span
            v-if="second == 0"
            class="input-box-form-item-code"
            @click="getCode"
            >获取验证码</span
          >
          <div v-else class="input-box-form-item-code">{{ second }}s后重试</div>
        </div>
        <div class="login-button" @click="login">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/apiService/apiService";
export default {
  data() {
    return {
      form: {
        telephone: "",
        authCode: "",
      },
      second: 0,
      secondIntrval: null,
    };
  },
  mounted() {
    let user = window.localStorage.getItem("userInfo");
    if (user) {
      this.$router.push("projectlist");
    }
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const paramValue = urlParams.get('authCode')
    if (paramValue) {
      this.getYkbUserInfo(paramValue)
    }
    
  },
  methods: {
    getYkbUserInfo(authCode){
      service.getYkbUserInfo({
        "ykbFlag": "2",
				'authCode': authCode
      }).then(res=>{
        debugger
        // console.log('ykbuserinfo=',res)
        let user = res.data;
        window.localStorage.setItem("userInfo", JSON.stringify(user));
        this.$router.push("projectlist");

      }).catch(err=>{
        this.$message({
          message: err,
          type: "warning",
        });
      })
    },

    getCode() {
      if (!this.checkTelephone(this.form.telephone)) {
        this.$message({
          message: "请准确输入手机号",
          type: "warning",
        });
        return;
      }

      service
        .getCode(this.form.telephone)
        .then((res) => {
          this.startTimer();
        })
        .catch((err) => {
          this.$message({
            message: err,
            type: "warning",
          });
        });
    },
    login() {
      service
        .login(this.form)
        .then((res) => {
          let user = res.data;
          window.localStorage.setItem("userInfo", JSON.stringify(user));
          this.$router.push("projectlist");
        })
        .catch((err) => {
          this.$message(err);
        });
    },
    startTimer() {
      clearInterval(this.secondIntrval);
      this.second = 60;
      this.secondIntrval = setInterval(() => {
        this.second--;
        if (this.second === 0) {
          clearInterval(this.secondIntrval);
        }
      }, 1000);
    },
    checkTelephone(telephone) {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(telephone)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-box {
  background-image: url(../assets/login-bg.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-box {
  display: flex;
  img {
    width: 523px;
    height: 510px;
  }
  &-form {
    width: 523px;
    height: 510px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    &-title {
      font-size: 30px;
      color: #444444;
      margin-bottom: 70px;
    }
    &-item {
      font-weight: 400;
      font-size: 16px;
      color: #1b1b1b;
      display: flex;
      width: auto;
      margin: 0px 62px;
      width: -webkit-fill-available;
      margin-bottom: 60px;
      border-bottom: solid 1px #ceced0;
      padding-bottom: 10px;
      &-title {
        margin-right: 15px;
      }
      &-code {
        font-weight: 400;
        font-size: 16px;
        color: #1971cb;
        margin-left: 10px;
        cursor: pointer;
      }
      input {
        flex: 1;
        border: none;
        font-size: 14px;
        padding: 5px 10px;
      }
    }
    .login-button {
      background-color: #0f84d3;
      color: #fff;
      font-size: 18px;
      border-radius: 4px;
      text-align: center;
      padding: 5px 0px;
      width: 337px;
      cursor: pointer;
    }
  }
}
</style>
